<template>
  <div class="touch-go">
    <!-- 兑换信息卡片 -->
    <div class="exchange-card">
      <div class="flex justify-between items-center">
        <div class="flex  items-center">
          <img :src="data.exchange_icon" alt="Touch Go"  class=" object-cover w-[60px] h-[40px] ">
         <div>
          <div class="mb-[5px]">{{ t('touchGo.exchangeAmount') }}:</div>
          <div class="option-points" >
            <img src="@/assets/image/c1.png" alt="Touch Go">
            <div>
              -{{data.asset_amount}}
            </div>
          </div>
         </div>
        </div>
        <div>
          <div class=" font-bold text-[16px]">{{data.exchange_actual_currency}} {{ data.exchange_actual_amount }}</div>
          <div class="text-[#999999] mt-[10px]">{{dayjs(new Date()).format('DD/MM/YYYY')}}</div>
        </div>
      </div>
      <!-- 费用明细 -->
      <div class="fee-list">
        <div class="fee-item">
          <span>{{ t('touchGo.serviceFee') }}</span>
          <span class="red">-{{ data.exchange_actual_currency }} {{data.exchange_fee}}</span>
        </div>
        <div class="fee-item">
          <span>{{ t('touchGo.taxFee') }}</span>
          <span class="red">-{{ data.exchange_actual_currency }} {{data.exchange_taxes}}</span>
        </div>
        <div class="fee-item">
          <span>{{ t('touchGo.discountAmount') }}</span>
          <span class="green">+{{ data.exchange_actual_currency }} {{data.exchange_discount_amount}}</span>
        </div>
        <div class="fee-item">
          <span>{{ t('touchGo.actualAmount') }}</span>
          <span class="green">{{ data.exchange_actual_currency }} {{data.exchange_actual_amount}}</span>
        </div>
      </div>
    </div>

    <!-- 收款信息表单 -->
    <div class="payment-info">
      <div class="section-title">{{ t('touchGo.paymentInfo') }}</div>
      <input type="text" :placeholder="t('touchGo.enterName')" class="input-field" v-model="data.full_name" v-if="checkItemShow('full_name')">
      <input type="text" :placeholder="t('touchGo.enterPhone')" class="input-field" v-model="data.phone" v-if="checkItemShow('phone')">
      <input type="text" :placeholder="t('touchGo.enterTaxId')" class="input-field" v-model="data.tax_id" v-if="checkItemShow('tax_id')">
      <input type="text" :placeholder="t('touchGo.enterAccount')" class="input-field" v-model="data.payee_account" v-if="checkItemShow('payee_account')">
      <input type="text" :placeholder="t('touchGo.reenterAccount')" class="input-field" v-model="data.payee_account1" v-if="checkItemShow('payee_account')">
      <div class="input-field2" v-if="checkItemShow('bank_name')">
        <input type="text" readonly @click="showBankList = true" :placeholder="t('touchGo.selectBank')" class="input-field" v-model="data.bank_name">
      </div>
      <button class="submit-btn" @click="handleSubmit">{{ t('touchGo.submit') }}</button>
    </div>  

    <!-- 兑换提示 -->
    <div class="exchange-tips">
      <div class="tips-title">{{ t('touchGo.exchangeTips') }}:</div>
      <div class="tips-content">
        <p>{{ t('touchGo.tips.0') }}</p>
        <p>{{ t('touchGo.tips.1') }}</p>
        <p>{{ t('touchGo.tips.2') }}</p>
        <p>{{ t('touchGo.tips.3') }}</p>
        <p>{{ t('touchGo.tips.4') }}</p>
        <p>{{ t('touchGo.tips.5') }}</p>
      </div>
    </div>
    <van-popup v-model:show="showBankList" round position="bottom">
      <van-picker
        :columns="columns"
        @cancel="showBankList = false"
        @confirm="onConfirm"
        :confirm-button-text="t('common.confirm')"
        :cancel-button-text="t('common.cancel')"
      />
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import api from "@/api/api";
import { showToast } from "vant";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();
import { useAutoRequest } from "@/hooks/loading";
const router = useRouter()
const route = useRoute()
import dayjs from "dayjs";



const data = ref<any>({})
const [loading, gamePayout] = useAutoRequest(api.gamePayout)
const fields = ref<any>([])
const getData = async () => {
  const res = await gamePayout({
    ...route.query
  })
  let list = []
  for (let i in res['filling_fields']) {
    const item = res['filling_fields'][i]
    console.log(item)
    if (Array.isArray(item)) {
      list = [...list, ...item]
    } else {
    }
  }
  fields.value =  [
    ...list,
  ]
  console.log(fields.value, 33333)
  // data.value = res
}

const checkItemShow = (name:string)=> {
  
  return fields.value.find(item=> !!item[name])
}
watchEffect(()=> {
  console.log(route.query)
   if (route.query.package_name && route.query.device_id) {
    data.value = {
      ...route.query
    }
    console.log(data.value)
    getData()
   }
})

const showBankList = ref(false)
const columns = computed(() => {
  const bankList = fields.value.find(item => !!item['bank_name'])?.bank_name
  if (bankList && Array.isArray(bankList)) {
    // 处理数组格式的银行列表
    return bankList.map(bank => {
      const [key, value] = Object.entries(bank)[0]
      return {
        text: value,
        value: key
      }
    })
  }
  return []
})
const onConfirm = (value: any) => {
  console.log(value.selectedOptions)
  data.value.bank_name = value.selectedOptions[0].value
  showBankList.value = false
}

const [loading1, gamePayoutApply] = useAutoRequest(api.gamePayoutApply)
const handleSubmit = async()=> {
  console.log(data.value)
  if (checkItemShow('payee_account')){
    if (!data.value.payee_account){
      showToast(t('touchGo.pleaseEnterAccount'))
      return
    }
    if (data.value.payee_account !== data.value.payee_account1){
      showToast(t('touchGo.accountMismatch'))
      return
    }
  }
  if (checkItemShow('bank_name')){
    if (!data.value.bank_name){
      showToast(t('touchGo.pleaseSelectBank'))
      return
    }
  }
  if (checkItemShow('full_name')){
    if (!data.value.full_name){
      showToast(t('touchGo.pleaseEnterName'))
      return
    }
  }
  if (checkItemShow('phone')){
    if (!data.value.phone){
      showToast(t('touchGo.pleaseEnterPhone'))
      return
    }
  }
  if (checkItemShow('tax_id')){
    if (!data.value.tax_id){
      showToast(t('touchGo.pleaseEnterTaxId'))
      return
    }
  }
  await gamePayoutApply({
    ...data.value,
    game_exchange_id: data.value.id,
  })
  showToast(t('touchGo.submitSuccess'))
  setTimeout(()=> {
    router.back()
  }, 1000)
}
</script>
<style scoped>
.touch-go {
  padding: 16px;
  min-height: 100vh;
  background: #F6F6F6;
}
.submit-btn {
  width: 300px;
  margin-top: 10px;
  font-size: 16px;
  height: 39px;
  background-color: #12CA74;
  color: white;
  border: none;
  border-radius: 30px;
  cursor: pointer;
}
.header {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

.exchange-card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.amount-info {
  margin-bottom: 20px;
}

.amount-tag {
  background: #4CAF50;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
}

.right-info {
  float: right;
}

.fee-item {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
  padding: 8px 0;
  border-bottom: 1px solid #EEEEEE;
}

.fee-item:last-child {
  border-bottom: none;
}

.red { color: red; }
.green { color: #4CAF50; }

.payment-info {
  background: white;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.section-title {
  color: #333;
  margin-bottom: 16px;
  font-weight: bold;
}

.input-field {
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  border: none;
  background: #f5f5f5;
  border-radius: 4px;
}
.input-field2 {
  width: 100%;
  margin: 8px 0;
  border: none;
  background: #f5f5f5;
  border-radius: 4px;
  position: relative;
  appearance: none;
  padding-right: 30px;
}
.input-field2 > .input-field {
  padding: 6px;
}
.input-field2::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #999;
  pointer-events: none;
}

.exchange-tips {
  border-radius: 8px;
  padding: 16px;
}

.tips-title {
  margin-bottom: 12px;
  font-weight: bold;
}

.tips-content p {
  margin: 8px 0;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}
.option-points {
  font-size: 12px;
  margin: 5px 0;
  color: #fff;
  background: #24CE35;
  border-radius: 39px;
  height: 24px;
  display: flex;
  width: 100px;
  align-items: center;
  justify-content: center;
  img {
    width: 20px;
    height: 16px;
  }
}
</style>
    